<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ul li {
      list-style: none;
    }

    li ul {
      display: none;
    }

    .plus {
      color: blue;
    }

    .minus {
      color: brown;
    }
  </style>
</head>

<body>
  <p>深度：4级菜单(主题市场--》有车族--》三级--》四级)</p>
  <ul class="box">
    <li>
      主题市场
      <ul>
        <li>
          运动派
          <ul>
            <li>三级菜单a</li>
            <li>三级菜单b</li>
            <li>三级菜单c</li>
            <li>三级菜单d</li>
          </ul>
        </li>
        <li>
          有车族
          <ul>
            <li>
              三级
              <ul>
                <li>四级</li>
                <li>四级</li>
                <li>四级</li>
              </ul>
            </li>
            <li>三级</li>
            <li>三级</li>
            <li>三级</li>
          </ul>
        </li>
        <li>生活家</li>
      </ul>
    </li>
    <li>
      特色购物
      <ul>
        <li>淘宝二手</li>
        <li>拍卖会</li>
        <li>爱逛街</li>
        <li>全球购</li>
        <li>淘女郎</li>
      </ul>
    </li>
    <li>
      优惠促销
      <ul>
        <li>天天特价</li>
        <li>免费试用</li>
        <li>清仓</li>
        <li>1元起拍</li>
      </ul>
    </li>
  </ul>


  <!-- 
    部分jQuery方法介绍：
    .has
    保留包含特定后代的元素，去掉那些不含有指定后代的元素。
    .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。
    提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。


   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>

    $("li").click(function () {
      $(this.children).toggle("500");
      $(this).siblings().children("ul").hide("500");
      if ($(this).hasClass("plus")) {
        $(this).attr("class", "minus");
      } else {
        $(this).attr("class", "plus");
      }
      return false;
    });
  </script>
</body>

</html>